<template>
  <div id="amdin_head">
    <!-- 展开或收起菜单 -->
    <el-button type="text" :icon="collapse?'el-icon-s-unfold':'el-icon-s-fold'" @click="isCollapse"></el-button>
    <!-- <div class="first"> -->
    <el-row :gutter="20" type="flex" justify="between">
      <el-col>
        <div class="title_left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>
              <i :class="this.$store.state.headicon"></i>
              {{$store.state.headTitle}}
            </el-breadcrumb-item>
            <el-breadcrumb-item v-if="this.$store.state.show">
              <b style="color: #181D2C;">{{$store.state.headTitle_2}}</b>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col><!-- 当视口在 sm 及以下尺寸时隐藏  class="hidden-sm-and-down"-->
      <el-col>
        <div class="title_right">
          <!-- 全屏设置 -->
          <el-tooltip effect="dark" :content="content" placement="bottom">
            <el-button type="text" :icon=" isFullScreen ? 'el-icon-aim':'el-icon-full-screen'" @click="screen"></el-button>
          </el-tooltip>
          <!-- 错误日志 -->
          <el-button type="text" plain>
            <i class="el-icon-s-opportunity"></i>
          </el-button>
          <!-- 语言切换 -->
          <el-dropdown trigger="click" placement="bottom" @command="language" style="margin: 0 10px;">
            <span class="el-dropdown-link" style="color: #5272FF;font-size: 10px;">
              {{$t('lang.language')}}
              &nbsp;<i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="zh-CN">中文简体</el-dropdown-item>
              <el-dropdown-item command="zh-TW">中文繁体</el-dropdown-item>
              <el-dropdown-item command="en-US">English</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <!-- 修改密码或退出登录 -->
          <span class="demonstration">theone</span>
          <el-dropdown class="theone" placement="bottom">
            <span class="el-dropdown-link">
              <i class="el-icon-user-solid"></i>
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="changePassword">{{$t('lang.change_password')}}</el-dropdown-item>
              <el-dropdown-item @click.native="logoutFn">{{$t('lang.log_out')}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
    <!-- </div> -->
    <xgmm ref="xiugaimm"></xgmm>
  </div>
</template>

<script>
  // import 'element-ui/lib/theme-chalk/display.css';
  import screenfull from 'screenfull' //全屏插件
  import xgmm from "../xgmm/xgmm.vue"
  export default {
    name: "admin_head",
    components: {
      xgmm,
    },
    data() {
      return {
        collapse: this.parent.collapse,
        isFullScreen: false,
        content: this.isFullScreen ? "退出全屏" : "全屏",
      }
    },
    methods: {
      //展开或显示导航
      isCollapse() {
        this.collapse = !this.collapse;
        this.parent.collapse = this.collapse;
        // console.log(this.parent.collapse);
      },
      // 设置全屏
      screen() {
        if (screenfull.enabled) { //浏览器不支持全屏
          this.$message("浏览器不支持全屏");
          return false;
        }
        screenfull.toggle(); //设置全屏
        this.isFullScreen = !this.isFullScreen;
        this.content = this.isFullScreen ? "退出全屏" : "全屏";
        // console.log(this.data)
      },
      // 语言切换
      language(lang) {
        this.$i18n.locale = lang;
        localStorage.setItem("languageSet", this.$i18n.locale);
        this.$message(this.$t("lang.i18n-tip"));
      },
      // 退出登录
      logoutFn() {
        localStorage.removeItem("username");
        this.$router.push("/")
      },
      // 修改密码
      changePassword() {
        this.$refs.xiugaimm.xgmm(true);
      }
    },
    props: ["parent"],

  }
</script>

<style>
  #amdin_head {
    display: flex;
    /* width: 100%; */
    background-color: white;
    padding: 5px 20px;
    font-size: 14px;
  }

  #amdin_head>.el-button {
    font-size: 25px;
    color: #8d8d8d;
    margin-right: 15px;
  }

  #amdin_head>.el-button:hover,
  .title_right .el-button:nth-last-of-type(1):hover {
    color: #5272FF;
  }

  #amdin_head .el-row {
    padding: 10px 20px 10px 20px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    line-height: 200%;
  }

  #amdin_head .el-col {
    /* background-color: #5272FF; */
    white-space: nowrap;
  }

  .title_left .el-breadcrumb {
    margin-top: 9px;
  }

  .title_right .el-tooltip {
    font-size: 20px;
    padding: 0;
    color: #181D2C;
  }

  .title_right .el-button:nth-last-of-type(1) {
    font-size: 20px;
    color: #181D2C;
    padding: 0px 3px;
  }

  .demonstration {
    font-size: 16px;
  }

  .theone i:nth-of-type(1) {
    font-size: 22px;
  }

  .title_right {
    display: flex;
    justify-content: flex-end;
    margin-top: 3px;
  }

  .title_left {
    margin-top: 1px;
  }

  .el-dropdown-link .el-icon-user-solid {
    position: relative;
    top: 5px;
    left: 8px;
  }

  .el-dropdown-link .el-icon-caret-bottom {
    margin-left: 8px;
  }

  .el-breadcrumb__item {
    float: none;
    /*el-breadcrumb__item不换行 */
  }
</style>
